<script>
  import { onMount } from 'svelte';

  // 是否显示微信提示遮罩层
  let showWechatTip = false;

  onMount(() => {
    // 检测是否在微信环境中
    checkWechatEnvironment();
    console.log('Download app page loaded');
  });

  // 检测微信环境
  function checkWechatEnvironment() {
    const ua = navigator.userAgent.toLowerCase();
    const isWechat = ua.indexOf('micromessenger') !== -1;

    if (isWechat) {
      showWechatTip = true;
    } else {
      downloadApp()
    }
  }


  // 下载APK文件
  function downloadApp() {
    window.open('https://wc.inoteexpress.com/wentianMobile/wentian.apk', '_blank');
  }
</script>

<svelte:head>
  <title>问天AI研究助手</title>
  <meta name="description" content="问天AI研究助手" />
</svelte:head>

<main>

  <!-- 主要内容 -->
  <div class="page-wrap">
    <div class="relative z-10">
      <!-- 标题 -->
      <div class="text-center mb-8">
        <h2 class="text-3xl font-bold bg-gradient-to-r to-blue-200 bg-clip-text mb-3">
          问天AI研究助手
        </h2>
        <p class="text-white/80 text-lg">扫描二维码或直接下载</p>
      </div>

      <!-- 二维码区域 -->
      <div class="flex justify-center mb-8">
        <div class="bg-white/95 backdrop-blur-sm p-6 rounded-3xl shadow-2xl border border-white/20 hover:scale-105 transition-transform duration-300">
          <img
            src="./images/mobile_code.jpg"
            alt="安卓下载二维码"
            class="w-48 h-48 object-contain rounded-2xl"
          />
        </div>
      </div>

      <!-- 下载按钮 -->
      <div class="px-4">
        <button
          class="w-full theme-bg-primary text-white py-2 px-6 rounded-full text-lg font-medium transition-all duration-300 transform hover:scale-105 hover:shadow-xl active:scale-95"
          on:click={downloadApp}
        >
          安卓用户下载
        </button>
      </div>
    </div>
  </div>
</main>

<!-- 微信环境提示遮罩层 -->
{#if showWechatTip}
  <div class="wx-bg" style="background-image: url('./images/tip.png');"></div>
{/if}

<style>
  /* 隐藏公共footer */
  :global(footer) {
    display: none !important;
  }

  /* 主题色 */
  .theme-bg-primary {
    background-color: #AA231B;
  }

  .theme-bg-primary:hover {
    background-color: #8B1D16;
  }

  /* 玻璃拟态效果 */
  .backdrop-blur-sm {
    backdrop-filter: blur(8px);
  }

  /* 自定义阴影 */
  .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }

  /* 响应式调整 */
  @media (max-width: 640px) {
    .w-48 {
      width: 12rem;
    }
    .h-48 {
      height: 12rem;
    }
  }

  /* 渐变文字效果 */
  .bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
  }

  /* 自定义布局 */
  .mb-8 {
    margin-bottom: 18px;
  }

  .wx-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.6);
    background-size: 375px;
    background-repeat: no-repeat;
    background-position: right top;
  }

  .page-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
</style>

